<template>
	<uni-popup ref="popup" :safe-area="false" type="bottom" class="popup-box" @maskClick="toggle(false)">
		<view class="popup-head flex-r ac">
			<text></text>
			<text class="text-bold">取关原因</text>
			<image class="close-icon" src="@/public/images/public/qxan.png" mode="aspectFit" @tap.stop="toggle(false)"></image>
		</view>
		<view class="popup-view flex-c bottom-ios">
			<view class="reason-title flex-r">
				<text class="text-primary">取关原因</text>
				<text class="text-secondary color-grey">（单选）</text>
			</view>
			<view class="reason-list flex-r">
				<view class="list-item flex-r ac color-grey" v-for="(item, index) in reasonList" :key="index" :class="{'active': index == isSelect}" @tap="isSelect=index">
					<text class="text-small">{{item}}</text>
				</view>
			</view>
			<view class="submit-box">
				<button class="btn active" @tap="submit">提交</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	/**
	 * NofollowReason 取消关注原因
	 * @description 取消关注专家的原因选择组件
	 * @property {String} expertId 专家ID
	 * @event {Function} select 选择完成回调
	 * @example <NofollowReason :expertId="expertId"></NofollowReason>
	 */
	export default {
		name: "NofollowReason",
		emits: ['select'],
		props: {
			expertId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isSelect: 0, //已选择的原因索引
				reasonList: ['长时间未更新方案','推送过于频繁','命中率太低','发布方案的比赛不感兴趣','没有原因，就是不想关注了'] //原因列表
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		watch: {
			expertId(newValue, oldValue) {
				if(newValue){
					this.toggle(true)
				}else{
					this.$refs.popup.close()
				}
			}
		},
		mounted() {
			if(this.expertId){
				this.toggle(true)
			}
		},
		methods: {
			//切换显示弹窗
			toggle(status){
				console.log(status);
				if(status){
					this.$refs.popup.open()
				}else{
					this.$emit("update:expertId", null);
				}
			},
			//确认提交
			submit() {
				this.$emit('select', this.reasonList[this.isSelect])
				this.$nextTick(()=>{
					this.toggle(false)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-box{
		z-index: 1000;
		/deep/ .bottom{
			max-width: $max-width;
			margin: $pc-margin;
		}
		.popup-head{
			height: 96rpx;
			padding: 0 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			border-bottom: 1rpx solid #EDEDED;
			.text-bold{
				flex: 2;
				text-align: center;
				font-size: 36rpx;
			}
			.close-icon{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.popup-view{
			padding: 0 20rpx;
			.reason-title{
				margin-top: 30rpx;
				align-items: flex-end;
			}
			.reason-list{
				margin-top: 20rpx;
				flex-wrap: wrap;
				.list-item{
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
					margin: 0 20rpx 20rpx 0;
					box-sizing: border-box;
					background: #F2F5FA;
					border-radius: 8rpx;
					&.active{
						background: #F2F7FF;
						border: 2rpx solid #4D88FF;
						color: #4D88FF;
						line-height: 56rpx;
					}
				}
			}
			.submit-box{
				margin: 20rpx 0 60rpx;
			}
		}
		.bottom-ios{
			background-color: #fff;
		}
	}
</style>